<template>
    <div class="clean_box">
        <top-timer pathName="Home" :isAdmin="true"/>
        <div class="clean">
            <div class="box_title center">
                <div class="font_40 col_333">请开箱清扫衣柜</div>
                <div class="font_28 col_666">清扫完成后请关闭柜门</div>
            </div>
            <div class="clean_list">
                <el-row class="list_head font_30">
                    <el-col :span="5">箱隔号</el-col>
                    <el-col :span="9">上次清扫时间</el-col>
                    <el-col :span="5">清扫次数</el-col>
                    <el-col :span="5">操作</el-col>
                </el-row>
                <el-row class="list_body font_28" v-for="clean in cleanBoxDetails" :key="clean.boxDetailId">
                    <el-col :span="5">{{clean.boxCode || '——'}}</el-col>
                    <el-col :span="9">{{clean.lastCleanTime || '——'}}</el-col>
                    <el-col :span="5">{{clean.cleanNums || '0'}}</el-col>
                    <el-col :span="5" class="handle_color">
                        <div @click="openBoxDetail(clean)">开柜</div>
                    </el-col>
                </el-row>
            </div>
            <div class="btn" @click="openBoxDetail('all')" v-if="cleanBoxDetails.length>0">全部打开</div>
        </div>
        <top-tips/>
    </div>
</template>

<script>
  export default {
    name: 'clean-box',
    data() {
        return{
          cleanBoxDetails:[]
        }
    },
    created() {
      this.getCleanBoxDetails()
    },
    methods:{
      // 获取待清柜列表
      getCleanBoxDetails(){
        this.$axios.get('cleanRest/getCleanBoxDetails').then(res => {
            this.cleanBoxDetails = res.data
        })
      },
      // 单个开柜
      openBoxDetail(clean){
        var params = [];
        if(clean==='all'){
            for(let g of this.cleanBoxDetails){
              params.push({boxCode:g.boxCode,boxDetailId:g.boxDetailId})
            }
        } else {
          params.push({boxCode:clean.boxCode,boxDetailId:clean.boxDetailId})
        }
        if (params.length === 0) {
          this.$alert('没有可以清理的柜子');
          return;
        }
        let promises = [];
        for(let param of params){
          setTimeout(()=>{
            promises.push(this.callOpen(param.boxCode,param.boxDetailId));
          },200)
        }
        Promise.all(promises).then((result) => {
          params = params.filter(item => {
            let index = result.findIndex(i => { i === item.boxCode; });
            return index < 0;
          });
          this.$router.push({path: 'cleanOpenCupboard', query: {arr: JSON.stringify(params), type: ''}});
        });
      },
      callOpen(boxCode,boxDetailId){
        return new Promise((resolve, reject) => {
          let success = () => {
            this.$axios.post('cleanRest/openBoxDetail',{
              boxDetailId:boxDetailId
            }).then(res => {
              if (res.data.result) {
                resolve('');
              } else {
                this.$alert(res.data.msg || '开箱错误');
                reject(boxCode);
              }
            })
          }
          let error = () => {
            reject(boxCode);
            this.$alert('开箱失败，请联系客服，联系方式见屏幕下方！');
          };
          let boxMac = this.$boxConfig[boxCode];
          window.cordova.plugins.CabinetPlugin.sendOpenBoxCommand(boxMac, success, error);
        })
      }
    }
  }
</script>

<style lang="scss">
    .clean_box{
        .clean{
            .box_title {
                div {
                    margin: 0.20rem 0;
                }
            }
            .clean_list{
                margin:0.60rem 0.80rem;
                text-align: center;
                height:6.50rem;
                overflow-y: scroll;
                .list_head{
                    background:rgba(236,245,252,1);
                    padding:0.19rem 0;
                    color:#999;
                }
                .list_body{
                    padding:0.19rem 0;
                    color:#666;
                    border-bottom:0.02rem solid rgba(202,229,253,1);
                    .handle_color{
                        color:#0A82EC;
                    }
                }
            }
            .btn{
                width:2.40rem;
                height:0.80rem;
                margin:0.80rem auto 0;
                line-height:0.75rem;
                box-shadow:0rem 0.02rem 0.04rem 0rem rgba(10,130,236,0.2);
                border-radius:0.50rem;
                border:0.02rem solid rgba(0,128,244,1);
                background:rgba(10,130,236,1);
                color:#fff;
                font-size:0.40rem;
                text-align: center;
            }
        }
    }
</style>
